<template>
	<view v-if="info">
		<view class="bg-white u-font-14">
			<view class="item">
				<text class="color-6">失信人姓名</text>
				<text class="color-3">{{info.name}}</text>
			</view>
			<view class="item">
				<text class="color-6">失信人性别</text>
				<text class="color-3">{{info.sex}}</text>
			</view>
			<view class="item">
				<text class="color-6">身份证号</text>
				<text class="color-3">{{info.id_number}}</text>
			</view>
			<view class="item">
				<text class="color-6">手机号</text>
				<text class="color-3">{{info.mobile}}</text>
			</view>
			<view class="item">
				<text class="color-6">微信号</text>
				<text class="color-3">{{info.wechat}}</text>
			</view>
			<view class="item">
				<text class="color-6">微信昵称</text>
				<text class="color-3">{{info.nickname}}</text>
			</view>
		</view>


		<view class="u-p-28 color-3 u-font-16">
			举报理由
		</view>
		<view class="desc color-3 u-font-14 bg-white u-m-l-28 u-m-r-28 u-m-b-28 u-p-20">
			{{info.reason}}
		</view>
		<view class="u-p-28 color-3 u-font-16">
			举报证据
		</view>
		<view class="u-p-l-28 u-p-r-28 u-p-b-28">
			<u-row>
				<u-col :span="3" v-for="(item,index) in info.images" :key="index">
					<view class="u-m-b-18">
						<u-image @click="previewImage(item)" border-radius="12" width="80px" height="80px" :src="item">
						</u-image>
					</view>
				</u-col>

			</u-row>

		</view>
	</view>

</template>

<script>
	import {
		getBlackListDetail
	} from '@/api/index';
	export default {
		data() {
			return {
				id: '',
				info: null
			};
		},
		onLoad(options) {
			this.id = options.id;
		},
		mounted() {
			this.getInfo();
		},
		methods: {
			async getInfo() {
				const res = await getBlackListDetail({
					id: this.id
				});
				this.info = res.data;
			},
			previewImage(item) {
				uni.previewImage({
					current: item,
					urls: this.info.images
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		line-height: 38px;
		height: 38px;
		display: flex;
		justify-content: space-between;
		margin: 0 28rpx;
		border-bottom: 1rpx solid #ECECEC;
	}

	.desc {
		border-radius: 4px;
	}

	// .img {
	// 	margin-left: 18rpx;

	// 	&:nth-child(4n-3) {
	// 		margin-left: 0;
	// 	}
	// }
</style>
